﻿@{
    ViewBag.Title = "Home Page";
}
@Html.ActionLink("props","Props")
<div id="app">
    <parent-component></parent-component>
    <my-componet></my-componet>
   
</div>
<div id="app2">
    <mygen-componet></mygen-componet>
</div>
@section footscripts{
    <script type="text/javascript">
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        });

        //全局注册
        Vue.component("mygen-componet", { template: '<div>简单注册</div>' });

        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })

        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template: '<div><p>This is a Parent component</p><child-component></child-component></div>',
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })

        // 全局注册Parent组件
        Vue.component('parent-component', Parent)

        new Vue({
            el: '#app',
            components: {
                'my-componet':myComponent
            }
        });

        new Vue({
            el: '#app2',
        });


    </script>
}